import QtQuick 6.2
import QtQuick.Controls 6.2
import QtQuick.Controls.Material 2.15
//import QtQuick.Controls.Styles 1.4
//import QtQuick.Controls.Universal 2.15
Window {
    id:box
    x: Screen.width / 2 - width / 2
    y: Screen.height / 2 - height / 2
    width: 1440
    height: 960
    visible: true
    title: qsTr("FAST控制中心")
    property real visdible_y: 0
    property color down_b: "#d91e63"
    property color hovered_b: "#ff2e73"
    property color back_b:"#e91e63"

    property int force
    property int friction_t
    property int gain
    property int encoderCPR
    property int degrees
    onVisdible_yChanged: {
        switch(visdible_y){
        case 1:
            box.down_b =  "#d91e63"
            box.hovered_b = "#ff2e73"
            box.back_b = "#e91e63"
            break
        case 2:
            box.down_b =  "#4fe4ef"
            box.hovered_b = "#6fffff"
            box.back_b = "#5ff4ff"
            break
        case 3:
            box.down_b =  "#6fe4cf"
            box.hovered_b = "#8fffdf"
            box.back_b = "#7ff4df"
            break
        case 4:
            box.down_b =  "#8fdfdf"
            box.hovered_b = "#afefef"
            box.back_b = "#dfdfdf"
            break
        default:
            box.down_b =  "#d91e63"
            box.hovered_b = "#ff2e73"
            box.back_b = "#e91e63"
            break

        }
    }

    MouseArea {
        id: item4
        anchors.left: parent.right
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.leftMargin: -200
        z:1
        //        x: 1204
        //        width: 121
        //        height: 40
        //        anchors.top: parent.top
        //        anchors.right: parent.right
        hoverEnabled: true
        propagateComposedEvents:true
        //        anchors.topMargin: 40
        //        anchors.rightMargin: 36
        onEntered: {
            //            button.checkable = true
            //            button1.anchors.topMargin = 70
            //            button2.anchors.topMargin = 120
            //            button3.anchors.topMargin = 170
            //            item4.height = 200
        }
        onExited: {
            //            button.checkable = false
            //            button1.anchors.topMargin = 20
            //            button2.anchors.topMargin = 20
            //            button3.anchors.topMargin = 20
            //            item4.height = 40
        }
        onWheel:(wheel)=> {
                    if(wheel.angleDelta.y > 0){
                        if(setting_ped.y === 0){
                            visdible_y = 1;
                            main_ui.y = 0;
                            setting_ped.y = box.height;
                            wheel_setting.y = box.height;
                            about_page.y = box.height;
                        }else if(wheel_setting.y === 0){
                            visdible_y = 2;
                            main_ui.y = -box.height;
                            setting_ped.y = 0;
                            wheel_setting.y = box.height;
                            about_page.y = box.height;
                        }else if(about_page.y === 0){
                            visdible_y = 3;
                            main_ui.y = -box.height;
                            setting_ped.y = -box.height;
                            wheel_setting.y = 0;
                            about_page.y = box.height;
                        }else if(main_ui.y === 0){

                        }

                    }else {
                        if(setting_ped.y === 0){
                            visdible_y = 3;
                            main_ui.y = -box.height;
                            setting_ped.y = -box.height;
                            wheel_setting.y = 0;
                            about_page.y = box.height;
                        }else if(about_page.y === 0){

                        }else if(wheel_setting.y === 0){
                            visdible_y = 4;
                            main_ui.y = -box.height;
                            setting_ped.y = -box.height;
                            wheel_setting.y = -box.height;
                            about_page.y = 0;
                        }else if(main_ui.y === 0){
                            visdible_y = 2;
                            main_ui.y = -box.height;
                            setting_ped.y = 0;
                            wheel_setting.y = box.height;
                            about_page.y = box.height;
                        }
                    }
                    //            console.log(visdible_y)
                    //            if(wheel.angleDelta.y < 0){
                    //                main_ui.y = -box.height;
                    //                setting_ped.y = 0
                    //            }else{
                    //                main_ui.y = 0;
                    //                setting_ped.y = box.height;
                    //            }
                }

        Timer{
            id: button_opa
            interval: 1500
            running: true
            onTriggered: {
                button.opacity = 0.1;
                button1.opacity = 0;
                button2.opacity = 0;
                button_save.opacity = 0;
                button3.opacity = 0;
            }
        }
        Timer{
            id: button_moove
            interval: 1300
            running: true
            onTriggered: {
                button1.anchors.topMargin = 20
                button2.anchors.topMargin = 20
                button_save.anchors.topMargin = 20
                button3.anchors.topMargin = 20
            }
        }
        Button {
            id: button
            width: 121
            text: qsTr("菜单")
            z:3
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.topMargin: 20
            background: Rectangle {
                height: parent.height - 7
                width: parent.width;
                color: parent.hovered ? parent.down ? down_b : hovered_b : back_b
                radius: 5
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            Behavior on opacity {
                NumberAnimation{
                    duration: 300
                }
            }
            onHoveredChanged: {
                if(button.hovered){
                    button1.anchors.topMargin = 70
                    button2.anchors.topMargin = 120
                    button_save.anchors.topMargin = 170
                    button3.anchors.topMargin = 220
                    button.opacity = 1;
                    button1.opacity = 1;
                    button2.opacity = 1;
                    button_save.opacity = 1;
                    button3.opacity = 1;
                    button_opa.stop()
                    //                    item4.height = 200
                }else{
                    button_moove.start()
                    button_opa.start()
                }
            }
            onClicked:{
                main_ui.y = 0;
                setting_ped.y = box.height;
                wheel_setting.y = box.height*2;
                about_page.y = box.height*3;
            }



        }

        Button {
            id: button1
            width: 121
            height: 40
            z:2
            text: qsTr("踏板设置")
            anchors.top: parent.top
            anchors.topMargin: 20
            checked: false
            autoExclusive: false
            anchors.horizontalCenter: button.horizontalCenter
            checkable: false
            background: Rectangle {
                height: parent.height - 7
                width: parent.width;
                color: parent.hovered ? parent.down ? down_b : hovered_b : back_b
                radius: 5
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            Behavior on anchors.topMargin {
                NumberAnimation {
                    duration: 300
                }
            }
            onClicked:{
                if(main_ui.y === 0 || about_page.y === 0){
                    main_ui.y = -box.height;
                    setting_ped.y = 0
                    wheel_setting.y = box.height;
                    about_page.y = box.height*2;
                    visdible_y = 2;
                }else{
                    main_ui.y = 0;
                    setting_ped.y = box.height;
                    wheel_setting.y = box.height*2
                    about_page.y = box.height*3;
                }
            }
        }

        Button {
            id: button2
            width: 121
            height: 40
            z:1
            text: qsTr("方向盘设置")
            anchors.top: parent.top
            anchors.topMargin: 20
            checked: false
            autoExclusive: false
            anchors.horizontalCenter: button.horizontalCenter
            checkable: false
            background: Rectangle {
                height: parent.height - 7
                width: parent.width;
                color: parent.hovered ? parent.down ? down_b : hovered_b : back_b
                radius: 5
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            Behavior on anchors.topMargin {
                NumberAnimation {
                    duration: 300
                }
            }
            onClicked: {
                if(wheel_setting.y !== 0){
                    main_ui.y = -box.height*2;
                    setting_ped.y = -box.height*1;
                    wheel_setting.y = 0;
                    about_page.y = box.height;
                    visdible_y = 3;
                }else{
                    main_ui.y = 0;
                    setting_ped.y = box.height;
                    wheel_setting.y = box.height*2;
                    about_page.y = box.height*3;
                }
            }
        }

        Button {
            id: button_save
            x: 1012
            width: 121
            height: 40
            z:2
            text: qsTr("保存配置")
            anchors.top: parent.top
            anchors.topMargin: 20
            checked: false
            autoExclusive: false
            anchors.horizontalCenter: button.horizontalCenter
            checkable: false
            background: Rectangle {
                height: parent.height - 7
                width: parent.width;
                color: parent.hovered ? parent.down ? down_b : hovered_b : back_b
                radius: 5
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            Timer{
                id:sava_ok;
                interval: 1000
                onTriggered: {
                    rectangle.width = 0;
                    rectangle.opacity = 0;
                }
            }
            Behavior on anchors.topMargin {
                NumberAnimation {
                    duration: 300
                }
            }
            onClicked:{
                task_brake.setReprot({"temp":15},16);
                rectangle.width = 300;
                rectangle.opacity = 1;
                sava_ok.start()

            }
        }
        Button {
            id: button3
            width: 121
            height: 40
            text: qsTr("关于")
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.horizontalCenter: button.horizontalCenter
            Behavior on anchors.topMargin {
                NumberAnimation {
                    duration: 300
                }
            }
            background: Rectangle {
                height: parent.height - 7
                width: parent.width;
                color: parent.hovered ? parent.down ? down_b : hovered_b : back_b
                radius: 5
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            onClicked: {
                if(about_page.y !== 0){
                    main_ui.y = -box.height*3;
                    setting_ped.y = -box.height*2;
                    wheel_setting.y = -box.height;
                    about_page.y = 0;
                    visdible_y = 4;
                }else{
                    main_ui.y = 0;
                    setting_ped.y = box.height;
                    wheel_setting.y = box.height*2;
                    about_page.y = box.height*3;
                }
            }
        }
    }
    property real wheel_engle: 0.0
    property real axis_rx: 0.00
    property real axis_ry: 0.00
    property real axis_brake: 0.00
    property real axis_throttle: 0.00

    App_ui {
        id:main_ui
        width: box.width
        height: box.height
        visible: true
        Behavior on y {
            NumberAnimation {
                duration: 500
            }
        }
    }
    Pedal_Setting{
        id:setting_ped
        y: box.height
        width: box.width
        height: box.height
        visible: true
        Behavior on y {
            NumberAnimation {
                duration: 500
            }
        }
    }
    Wheel_Setting{
        id:wheel_setting
        y: box.height * 2
        width: box.width
        height: box.height
        visible: true
        Behavior on y {
            NumberAnimation {
                duration: 500
            }
        }
    }
    Babout_qml {
        id:about_page
        y: box.height * 3
        width: box.width
        height: box.height
        visible: true
        Behavior on y {
            NumberAnimation {
                duration: 500
            }
        }
    }

    Rectangle {
        id: rectangle
        z:2
        width: 0
        height: 50
        color: "#a8e91e63"
        radius: 30
        opacity: 0
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: 319
        anchors.horizontalCenterOffset: 0
        anchors.horizontalCenter: parent.horizontalCenter
        Behavior on width {
            NumberAnimation {
                duration: 500
            }
        }
        Behavior on opacity {
            NumberAnimation {
                duration: 500
            }
        }
        Text {
            id: text1
            text: qsTr("保存配置成功")
            anchors.fill: parent
            font.pixelSize: 28
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.weight: Font.Normal
        }
    }

    //    Canvas {
    //        id:root
    //        visible: false
    //        width: 600
    //        height: 400
    //        contextType: "2d"
    //        property var operation:[
    //            'source-over','source-in','source-out','source-atop','destination-over','destination-in','destination-out','destination-atop',
    //            'lighter','copy','xor','qt-clear','qt-destination','qt-multiply','qt-screen','qt-overlay','qt-darken','qt-lighten','qt-color-dodge',
    //            'qt-color-burn','qt-hard-light','qt-soft-light','qt-difference','qt-exclusion']
    //        Image {
    //            id: name
    //            visible: false
    //            source: "qrc:/C:/Users/Bing/Desktop/asd-1.png"
    //        }
    //        onPaint:{
    //            var ctx = getContext("2d")
    //            ctx.lineWidth = 4
    //            ctx.strokeStyle = 'blue'
    //            ctx.fillStyle = 'steelblue'
    //            ctx.drawImage(name,0,0,800,60)
    ////            ctx.beginPath()
    ////            ctx.moveTo(50,50)
    ////            ctx.lineTo(150,50)

    ////            ctx.closePath()
    ////            ctx.stroke()
    ////            ctx.fillRect(20,20,80,80)
    //            //                ctx.fillStyle = "lightblue"
    //            //                ctx.globalCompositeOperation = operation[11]
    //            for(var i = 0; i < operation.length;i++){

    //                var dx=Math.floor(i%6)*100
    //                var dy=Math.floor(i/6)*100
    ////                ctx.sava()
    ////                ctx.fillRect(10+dx,10+dy,60,60)
    //                ctx.globalCompositeOperation = 'source-in'
    ////                ctx.globalAlpha = 0.7
    ////                ctx.beginPath()
    //                ctx.fillRect(30+dx,30+dy,800,80)
    //                ctx.restore()
    ////                ctx.sava()
    ////                ctx.stroke()
    //            }
    //        }

    //    }
    //    Rectangle {
    //        id: blueSquare
    //        width: 50; height: 50
    //        x: box.width - width - 10; y: 10    // making this item draggable, so don't use anchors
    //        color: "blue"

    //        Text { text: "Drag"; font.pixelSize: 16; color: "white"; anchors.centerIn: parent }

    //        MouseArea {
    //            anchors.fill: parent
    //            //! [drag]
    //            drag.target: blueSquare
    //            drag.axis: Drag.XAndYAxis
    //            drag.minimumX: 0
    //            drag.maximumX: box.width - parent.width
    //            drag.minimumY: 0
    //            drag.maximumY: box.height - parent.width
    //            //! [drag]
    //        }
    //    }
}
